<template>
  <div class="home">
    <div class="noScroll">
      <!-- 头部 -->
      <div class="header">
        <van-row justify="space-between">
          <!-- 图片 -->
          <van-col span="4">
            <img src="@/assets/homePic/image/titleLogo.jpg" alt="" />
          </van-col>
          <!-- 输入框 -->
          <van-col span="15">
            <router-link to="/search">
              <div class="serach">
                <van-icon name="search" class="sicon" size="20" />
                <input type="text" placeholder="输入商品搜索" />
              </div>
            </router-link>
          </van-col>
          <!-- 登录 -->
          <van-col span="3">
            <router-link to="/login">
              <div class="login">登录</div>
            </router-link>
          </van-col>
        </van-row>
      </div>
      <!-- 滚动导航标题 -->
      <div class="scrollTitle" swipeable>
        <!-- 标题 -->
        <div class="tab">
          <van-tabs v-model:active="active" shrink>
            <van-tab title="推荐"></van-tab>
            <van-tab
              :title="tab.name"
              v-for="tab in anotherData.categoryList
                ? anotherData.categoryList
                : ''"
              :key="tab.id"
            ></van-tab>
          </van-tabs>
        </div>
        <!-- 下拉框 -->
        <!-- <van-dropdown-menu active-color="#ee0a24" >
          <van-dropdown-item class="menu-item" >
            <div style=" { heigh: 40px; lineHeight: 40px; paddingLeft: 17px; fontSize: 20px; } " > 全部频道 </div>
             <div class="menu"> 
              <div id="item-menu" 
              class="navContent{{navI === menu.index ? 'active' :''  }}"
              @click="jumpAnother(index)" v-for="menu in recomandDatr.kingKongModule ? recomandDatr.kingKongModule.kingKongList.slice(0,9) : []" :key="menu.text" > {{ menu.text }} 
              </div> 
            </div>
          </van-dropdown-item>

        </van-dropdown-menu> -->
      </div>
    </div>
    <!-- 下拉組件 -->
    <!-- 推荐页面 -->
    <div class="recomand" v-if="isShowRec">
      <!-- 轮播图 -->
      <div class="swiper">
        <van-swipe
          class="my-swipe"
          width="375"
          :autoplay="3000"
          indicator-color="white"
        >
          <van-swipe-item
            v-for="pic in recomandDatr.focusList"
            :key="pic.extra.id"
          >
            <img :src="pic.picUrl" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="main">
        <!-- 標題 -->
        <div class="brand">
          <div
            class="content"
            v-for="brand in recomandDatr.policyDescList"
            :key="brand.desc"
          >
            <img :src="brand.icon" alt="" />
            <span>{{ brand.desc }}</span>
          </div>
        </div>
        <!-- 十個分類列表 -->
        <div class="category">
          <div
            class="cdata"
            v-for="card in recomandDatr.kingKongModule
              ? recomandDatr.kingKongModule.kingKongList
              : []"
            :key="card.text"
          >
            <img :src="card.picUrl" alt="" />
            <div>{{ card.text }}</div>
          </div>
        </div>
        <!-- 情人节卡片 -->
        <div class="card">
          <img :src=" recomandDatr.bigPromotionModule ? recomandDatr.bigPromotionModule.floorList[0].cells[0].picUrl : '' " alt="" />
          <img class="small" src="@/assets/homePic/image/003.webp" alt="">
        </div>
        <!-- 新人 -->
        <div class="newPeople">
          <span>→ &nbsp 新人专享礼 &nbsp←</span>
        </div>
        <!-- 红包 -->
        <div class="money">
          <div class="left">
            <span>新人专享礼</span>
            <div>
              <img src="@/assets/homePic/image/元.png" alt="" />
            </div>
          </div>
          <div class="right">
            <div class="top">
              <div>
                <div class="title">
                  {{
                    recomandDatr.indexActivityModule
                      ? recomandDatr.indexActivityModule[0].title
                      : ""
                  }}
                </div>
                <div class="subtitle">
                  {{
                    recomandDatr.indexActivityModule
                      ? recomandDatr.indexActivityModule[0].subTitle
                      : ""
                  }}
                </div>
              </div>
              <img
                :src="
                  recomandDatr.indexActivityModule
                    ? recomandDatr.indexActivityModule[0].picUrl
                    : {}
                "
                alt=""
              />
            </div>

            <div class="bottom">
              <div>
                <div class="title">
                  {{
                    recomandDatr.indexActivityModule
                      ? recomandDatr.indexActivityModule[1].title
                      : ""
                  }}
                </div>
                <div class="subtitle">
                  {{
                    recomandDatr.indexActivityModule
                      ? recomandDatr.indexActivityModule[1].tag
                      : ""
                  }}
                </div>
              </div>
              <img
                :src="
                  recomandDatr.indexActivityModule
                    ? recomandDatr.indexActivityModule[1].picUrl
                    : {}
                "
                alt=""
              />
            </div>
          </div>
        </div>
        <!-- 类目热销榜 -->
        <div class="sale">类目热销榜</div>
        <div class="hotCell">
          <div class="hotop">
            <div class="left">
              <div
                class="letter"
                v-for="Shop in recomandDatr.categoryHotSellModule
                  ? recomandDatr.categoryHotSellModule.categoryList.slice(0, 1)
                  : []"
                :key="Shop.extra"
              >
                <div class="pag">{{ Shop.categoryName }}</div>
                <div class="img">
                  <img :src="Shop.picUrl" alt="" />
                </div>
              </div>
            </div>
            <div class="right">
              <div
                class="letter"
                v-for="pag in recomandDatr.categoryHotSellModule
                  ? recomandDatr.categoryHotSellModule.categoryList.slice(1, 2)
                  : []"
                :key="pag.extra"
              >
                <div class="pag">{{ pag.categoryName }}</div>
                <div class="img">
                  <img :src="pag.picUrl" alt="" />
                </div>
              </div>
            </div>
          </div>
          <div class="hotBot">
            <div
              class="content"
              v-for="hotShop in recomandDatr.categoryHotSellModule
                ? recomandDatr.categoryHotSellModule.categoryList.slice(2, 9)
                : []"
              :key="hotShop.extra"
            >
              <p>{{ hotShop.categoryName }}</p>
              <img :src="hotShop.picUrl" alt="" />
            </div>
          </div>
        </div>
        <!-- 好好睡 -->
        <div class="good">
          <div class="left">
            <div
              class="letter"
              v-for="one in recomandDatr.sceneLightShoppingGuideModule
                ? recomandDatr.sceneLightShoppingGuideModule[0]
                : []"
              :key="one.desc"
            >
              <p>{{ one.title }}</p>
              <p>{{ one.desc }}</p>
              <img :src="one.picUrl" alt="" />
            </div>
          </div>
          <div
            class="right"
            v-for="two in recomandDatr.sceneLightShoppingGuideModule
              ? recomandDatr.sceneLightShoppingGuideModule[1]
              : []"
            :key="two.desc"
          >
            <div class="letter">
              <p>{{ two.title }}</p>
              <p>{{ two.desc }}</p>
            </div>
            <div class="pic">
              <img :src="two.picUrlList[0]" alt="" />
              <img :src="two.picUrlList[1]" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 其他页面 -->
    <Another :rightList="rightList" v-else></Another>

    <!-- 回到顶部 -->

    <van-back-top
      class="custom"
      right="3vw"
      bottom="8vh"
      immediate
      offset="400"
    >
      <van-icon name="arrow-up" />
    </van-back-top>
  </div>
</template>

<!-- 逻辑 -->
<script setup  lang="ts">
import { computed, onMounted, reactive, ref, watch } from "vue";
import { reqGetHomeData } from "@/api/home/index";
import { reqAnotherData } from "@/api/home/an0ther";
import Another from "./components/Another.vue";

//推荐页面的数据
const recomandDatr = ref<any>([]);
const anotherData = ref<any>([]);
const navI = ref(0)
const value = ref("");
// 绑定当前激活标签对应的索引值
const active = ref(0);
// 下拉菜单
const Dropvalue = ref(0);
// 是否展示推荐页
const isShowRec = ref(true);

let rightList = ref<any[]>([]);

//1.获取home数据
const getHomeData = async () => {
  const res = await reqGetHomeData();
  recomandDatr.value = res.data.data;
  // console.log(res);
};
// 2.获取其他页面
const getData = async () => {
  const res = await reqAnotherData();
  anotherData.value = res.data;
  // console.log(res)
};

//监听tab标签active
watch(
  [() => active.value],
  (newValue, oldValue) => {
    // console.log("监听了", anotherData.value.categoryList);

    if (anotherData.value.categoryList) {
      let reaArr = [];
      let allitem: any[] = anotherData.value.categoryItemList
        .map((a) => a.itemList)
        .flat(1);

      for (let i = 0; i < 15; i++) {
        let r = Math.round(Math.random() * allitem.length);
        let item = allitem[r];
        reaArr.push(item);
      }
      rightList.value = reaArr;
      if (active.value === 0) {
        isShowRec.value = true;
      } else {
        isShowRec.value = false;
      }
    }

  },
  { immediate: true }
);

onMounted(() => {
  getHomeData();
  getData();
});

//点击下拉框跳转页面
const  jumpAnother =(i:number)=>{
  console.log("点击了");
  isShowRec.value = false
  navI.value= i
  

}
</script>

<style scoped lang="less">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.home {
  width: 100%;
  height: 100%;
  .noScroll {
    // 设置滚动位置不滑动
    // 头部
    // position: fixed;
    // top: 0px;
    .header {
      background-color: #fff;
      width: 370px;
      height: 40px;
      padding: 10px;
      position: fixed;
      z-index: 33;
      top: 0px;
      img {
        width: 80px;
        margin-top: 4px;
      }
      .serach {
        display: flex;
        position: absolute;
        .sicon {
          position: relative;
          left: 25px;
          top: 4px;
        }
        input {
          width: 200px;
          height: 25px;
          text-indent: 25px;
          background-color: #ededed;
          border: #ededed;
        }
      }
      .login {
        margin-top: 4px;
        width: 40px;
        height: 18px;
        line-height: 14px;
        text-align: center;
        color: #dd1a21;
        border: 2px solid #dd1a21;
        border-radius: 5px;
      }
    }
    // 导航标题栏
    .scrollTitle {
      width: 100%;
      position: fixed;
      top: 40px;
      z-index: 33;
      display: flex;
      .showDrop {
        .bot,
        .top {
          width: 40px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          color: black;
          background-color: rgb(237, 236, 236);
          border-radius: 10px;
          position: absolute;
          top: 8px;
          right: 0px;
          z-index: 999999;
        }
      }
    }
    // 下拉菜单
    .menu {
      display: flex;
      flex-shrink: 0;
      flex-wrap: wrap;
      margin-left: 10px;
      #item-menu {
        margin: 10px 5px;
        text-align: center;
        width: 80px;
        height: 30px;
        line-height: 30px;
        border: 1px solid gray;
        background-color: #f3f3f3;
      }
     #item-menu .active{
       border-color: red;
      }
    }
  }

  // 推荐页面的样式
  .recomand {
    margin-top: 40px;
    box-sizing: border-box;
    .swiper {
      width: 100%;
      overflow: hidden;
      .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
        height: 200px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .my-swipe /deep/.van-swipe__indicators .van-swipe__indicator {
        width: 20px;
        height: 3px;
        border-radius: 0;
      }
    }
    .main {
      padding: 10px;
      // 自營品牌
      .brand {
        display: flex;
        justify-content: space-evenly;
        height: 13px;
        .content {
          height: 40px;
          display: flex;
          img {
            width: 20px;
            height: 20px;
          }
          span {
            font-size: 10px;
          }
        }
      }
      //商品列表
      .category {
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        flex-shrink: 0;
        flex-wrap: wrap;
        padding-bottom: 30px;
        .cdata {
          margin-top: 20px;
          width: 70px;
          height: 70px;
          img {
            width: 70px;
            height: 70px;
          }
        }
      }
      // 情人节图片
      .card {
        width: 100%;
        height: 100px;
        img {
          width: 350px;
          height: 100px;
        }
        .small{
          width: 100px;
          position: relative;
          bottom:80px;
          left:25px;
          height: 80px;
        }
      }
      // 新人
      .newPeople {
        // background-color: #39a9ed;
        padding-top: 20px;
        height: 70px;
        width: 100%;
        text-align: center;
        span {
          font-size: 20px;
          padding: 0 7px;
        }
      }
      // 红包
      .money {
        width: 100%;
        height: 200px;
        display: flex;
        justify-content: space-evenly;
        .left {
          width: 180px;
          background-color: #f9e9cf;
          text-align: center;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          span {
            font-size: 20px;
            padding-top: 20px;
          }
          img {
            width: 110px;
            height: 130px;
          }
        }
        .right {
          width: 150px;
          //  background-color: rgb(241, 49, 81);
          .top {
            background-color: rgb(225, 186, 192);
            height: 50%;
            display: flex;
            img {
              width: 100px;
            }
            .title {
              font-size: 16px;
              padding-top: 15px;
              margin-left: 2px;
            }
            .subtitle {
              padding-top: 5px;
              color: #ebeff6;
              margin-left: 2px;
            }
          }
          .bottom {
            display: flex;
            background-color: #f6ddb5;
            height: 50%;
            img {
              width: 80px;
            }
            .title {
              font-size: 16px;
              padding-left: 5px;
              padding-top: 10px;
            }
            .subtitle {
              text-align: center;
              margin-top: 8px;
              margin-left: 10px;
              background-color: #ebeff6;
            }
          }
        }
      }
      // 售卖属性
      .sale {
        width: 100%;
        height: 60px;
        font-size: 18px;
        line-height: 40px;
        padding-top: 10px;
      }
      // 热销榜
      .hotCell {
        .hotop {
          display: flex;
          height: 100px;
          justify-content: space-around;
          .left,
          .right {
            width: 180px;
            background-color: #f9f3e4;
            .letter {
              position: absolute;
              .pag {
                font-size: 17px;
                padding-top: 20px;
                padding-left: 10px;
              }
              .img {
                img {
                  width: 100px;
                  position: relative;
                  left: 80px;
                  bottom: 40px;
                }
              }
            }
          }
          .right {
            width: 170px;
            background-color: #ebeff6;
          }
        }
        .hotBot {
          padding-top: 10px;
          display: flex;
          flex-shrink: 0;
          flex-wrap: wrap;
          .content {
            box-sizing: border-box;
            margin: 6px 4px;
            padding: 10px;
            background-color: #ebeff6;
            width: 80px;
            height: 90px;
            img {
              width: 60px;
              height: 60px;
            }
          }
        }
      }
      // 好好睡
      .good {
        margin: 30px 0;
        display: flex;
        height: 180px;
        .left {
          width: 40%;
          padding-top: 6px;
          text-align: center;
          background-color: #ebeff6;
          .letter {
            font-size: 16px;
            img {
              height: 120px;
            }
          }
        }
        .right {
          width: 65%;
          background-color: #b2c3e0;
          text-align: center;
          margin-left: 8px;
          .letter {
            font-size: 16px;
            padding-top: 10px;
          }
          .pic {
            display: flex;
            justify-content: space-around;
            padding-top: 30px;
            img {
              width: 90px;
              height: 100px;
            }
          }
        }
      }
    }
  }
}
// 下拉框
.home /deep/.van-dropdown-menu {
  position: fixed;
  top: 34px;
  right: 0.5px;
  width: 30px;
  z-index: 66;
}
// 回到顶部
.custom {
  width: 80px;
  text-align: center;
}
</style>